<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Android Summernote">
    <meta name="author" content="Avinash S Karanth">
	<title>Android Summernote</title>

<!-- include libraries(jQuery, bootstrap) -->
<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery-2.2.2.min.js"></script> 
<script src="bootstrap.min.js"></script> 
<!-- include summernote css/js-->
<link href="summernote.css" rel="stylesheet">
<script src="summernote.min.js"></script>
</head>
<body>
<div id="summernote" style="width:100%;height:100%"></div>
<script>
$(document).ready(function() {
 $('#summernote').summernote({
  height: 1200,
  focus: true,
  placeholder: 'write here...',
  // set focus to editable area after initializing summernote
  toolbar: [
    ['style', ['style']],
    ['font', ['bold', 'italic', 'underline', 'clear']],
    ['fontname', ['fontname']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']],
    ['table', ['table']],
    ['insert', ['link', 'picture','video','hr']],
    ['view', ['codeview']],
    ['help', ['help']]
  ],
  callbacks: {
    onInit: function(e) {
      $("#summernote").summernote("fullscreen.toggle");
    }
  }
});
});
</script>
</body>
</html>